<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>index.scss</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../../../../css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/github.css" type="text/css" media="screen" />
<script src="../../../../../../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/jquery-effect.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div class="banner">
        
        <h1>
            index.scss
        </h1>
        <ul class="files">
            
            <li>
                lib/assets/stylesheets/ems_app/staff_salaries/index.scss
                
            </li>
            <li>Last modified: 2017-02-22 17:27:55 +0800</li>
        </ul>
    </div>

    <div id="bodyContent">
        <div id="content">
  
    <div class="description">
      
<p>@mixin col-width{</p>

<pre><code>&amp;:nth-child(1){ width: 40px; border-right: 0;}
&amp;:nth-child(2){ width: 100px;}
&amp;:nth-child(3){ width: 95px;}
&amp;:nth-child(4){ width: 90px;}
&amp;:nth-child(5){ width: 90px;}
&amp;:nth-child(6){ width: 90px;}
&amp;:nth-child(7){ width: 90px;}
&amp;:nth-child(8){ width: 90px;}
&amp;:nth-child(9){ width: 92px;}
&amp;:nth-child(10){ width: 92px;}
&amp;:nth-child(11){ width: 90px;}
&amp;:nth-child(12){ width: 92px;}
&amp;:nth-child(13){ width: 92px; border-right:0;}</code></pre>

<p>}</p>

<p>@mixin border-color{</p>

<pre><code>border:1px solid #d9d9d9;</code></pre>

<p>}</p>

<p>.list_table{</p>

<pre><code>.search_nav{
  .nav_item{ display:inline-block; margin-right:10px;}
  span{
    display:inline-block; text-align:right;
  }
}
table.commission_list,table.attendance_list,table.salary_list{
  width:100%;
  thead{
    tr{
      th{
        @include col-width;
        @include border-color;
        box-sizing: border-box;
        height:35px;
        &amp;:first-child{ border-right:1px solid #fff;}
      }
    }
  }
  tbody{
    tr{
      &amp;:nth-child(odd){
        background: #F2F2F2;
      }

      &amp;:hover{
        background: #dce2e5;
      }

      td{
        @include col-width;
        height:28px;
        text-align:center;
        box-sizing: border-box;
        @include border-color;

        a:hover, a:hover i{
          color: #014c8c;
        }
      }
    }
  }
  tfoot{
    tr{
      height:28px;
      td{
        @include border-color;
        span{
          display:inline-block;
          font-weight:bold;
          text-align:left;
        }
      }
    }
  }
}</code></pre>

<p>}</p>

<p>ul{</p>

<pre><code>list-style: none;
padding: 0px;</code></pre>

<p>} .content .main_top .back_to_list {</p>

<pre><code>float: right;
font-size: 20px;
color: #2d1152;</code></pre>

<p>}</p>

<p>.change_view_btn{</p>

<pre><code>padding: 3px 14px;
border-bottom: 2px solid #BE1274;
color:#fff;
background:rgb(234, 18, 158);</code></pre>

<p>}</p>

<p>@mixin col-width{</p>

<pre><code>&amp;:nth-child(1){ width: 8.10%; }
&amp;:nth-child(2){ width: 12.86%; }
&amp;:nth-child(3){ width: 6.82%; }
&amp;:nth-child(4){ width: 7.82%; }
&amp;:nth-child(5){ width: 7.25%; }
&amp;:nth-child(6){ width: 7.96%; }
&amp;:nth-child(7){ width: 9.31%; }
&amp;:nth-child(8){ width: 7.89%; }
&amp;:nth-child(9){ width: 8.24%; }
&amp;:nth-child(10){ width: 7.75%; }
&amp;:nth-child(11){ width: 7.82%; }
&amp;:nth-child(12){ width: 8.17%; }</code></pre>

<p>}</p>

<p>@mixin input-width{</p>

<pre><code>width:135px;</code></pre>

<p>}</p>

<p>.details{</p>

<pre><code>.salary_list_table{
  .list_wrap{
    overflow-y: scroll;
    border-right: 1px solid #d9d9d9;
    &amp;.highlight{
      tr:hover{ cursor:pointer; background:#FFF9F9; }
      tr.checked{ background:#FFF9F9; }
    }
  }
  ul.salary_list_head{
    height:35px; line-height:35px;
    border:1px solid #d9d9d9;
    li{
      float:left;
      text-align:center; font-weight:bold;
      border-right:1px solid #d9d9d9;
      box-sizing: border-box;
      &amp;:nth-child(1){ width: 40px; border-right: 0;}
      &amp;:nth-child(2){ width: 100px;}
      &amp;:nth-child(3){ width: 95px;}
      &amp;:nth-child(4){ width: 90px;}
      &amp;:nth-child(5){ width: 90px;}
      &amp;:nth-child(6){ width: 90px;}
      &amp;:nth-child(7){ width: 90px;}
      &amp;:nth-child(8){ width: 90px;}
      &amp;:nth-child(9){ width: 92px;}
      &amp;:nth-child(10){ width: 92px;}
      &amp;:nth-child(11){ width: 90px;}
      &amp;:nth-child(12){ width: 92px;}
      &amp;:nth-child(13){ width: 92px; border-right:0;}
    }
  }
}
.salary_related{
  display:none;
  .checkout_nav{
    height:30px; line-height:20px;
    border-bottom:1px solid #d9d9d9;
    &amp;&gt;div{
      display: inline-block;
      &amp;.staff_select{
        a{ display:inline-block;}
      }
      &amp;.operation{
        input.edit_btn,input.save_btn{
          &amp;[disabled]{ cursor:auto; background:#eee; color:#ccc;}
        }
      }
    }
    span{
      display:inline-block;
    }
  }
  table.abstract{
    margin:8px 0;
    width:100%;
    th,td{
      height:25px;
      border:1px solid #d9d9d9;
      @include col-width;
    }
    th{ border-top:none;}
    td{ border-bottom:none;}
  }

  div.salary_checkout{
    height: 452px;
    border:1px solid #d9d9d9;
    div.salary{
      border-top:12px solid #EDECEC;
      ul{
        margin-bottom: 30px;
        padding:10px 0;
        float:left;
        height:420px;
        &amp;.total_salary{
          width: 47.5%;
          border-right:1px solid #d9d9d9;
          input[type=&quot;text&quot;] { text-indent:40px;}
          &amp;&gt;li{
            &amp;:first-child{ text-indent: 12px; }
            &amp;.total{
              input { @include input-width; margin:30px 43px 0 0; }
            }
            ol{
              float:left;
              margin:10px 15px;
              li{
                height:32px; line-height:32px;
                input[type=&quot;text&quot;]{
                  @include input-width; margin-left:15px;
                  &amp;.total{ border-color: #F70500 ;}
                }
                label{ width:123px; text-align:right; }
                &amp;.bonus{ height: 64px; line-height: 96px;}
              }
            }
          }
        }
        &amp;.deducted_salary{
          width: 29.5%;
          border-right:1px solid #d9d9d9;
          &amp;&gt;li:first-child { text-indent: 12px;}
          &amp;&gt;li.total{
            input{ margin-top:156px; }
            label { margin-left: 36px; }
          }
          input[type=&quot;text&quot;] { text-indent:40px;}
          ol{
            margin: 10px auto 0 auto;
            width:70%;
            li{
              height:32px; line-height:32px;
              label { margin-right:12px; }
              input.total{ border-color: #F70500 ;}
            }
          }
        }
        &amp;.balance_salary{
          width: 22.55%;
          &amp;&gt;li:first-child { text-indent: 12px;}
          li{
            label{
              text-align: left;
              @include input-width;
              margin: 40px auto 15px auto;
            }
            input{ @include input-width; text-indent:40px;}
          }
        }
      }
    }
  }
}</code></pre>

<p>}</p>

    </div>
  


  


  
  


  


  

  



  

    

    

    


    


    <!-- Methods -->
              </div>

    </div>
  </body>
</html>
